<template>
  <div style="float: left;margin-top: 5px">
    <el-form ref="userSearchRef" :model="searchFormData">
      <el-form-item label="关键词" >
        <el-input  type="text" v-model="searchFormData.userName"></el-input>
      </el-form-item>
    </el-form>
  </div>
  <div style="height: 40px;margin-top: 5px;float: left;margin-left: 20px;">
    <el-button @click="searchDicClick">查询</el-button>
    <el-button @click="resetSearchClick">重置</el-button>
    <el-button v-check-permission="'system:user:add'" @click="addDicClick">新增</el-button>
  </div>
  <div style="clear: both"></div>
  <div style="height: calc(100% - 60px);">
    <Table  :show-page="true" ref="tableRef" :show-line-number="true"
            :showCheckBox="false" :url="userUlr" :columns="columns">
      <template  v-slot:handle="slotProps">
        <el-button v-check-permission="'system:user:update'"  @click.stop="editTableData(slotProps.rowData,slotProps.rowIndex)">编辑</el-button>
        <el-button v-check-permission="'system:user:delete'"  @click.stop="deleteTableRowData(slotProps.rowData,slotProps.rowIndex)">删除</el-button>
      </template>
    </Table>
    <DialogForm ref="userEditFormRef" :form="userForm" title="编辑用户" @validateSuccess="validateSuccess">
      <template v-slot:permissionTree="slotProps">
        <Tree ref="selectTree" :tree-data="menuTreeData" :checked-model="checkedModel" :options="menuTreeOptions" :data-config="dataConfig">
        </Tree>
      </template>
      <template v-slot:orgTree="slotProps">
        <Tree ref="pSelectTree" :tree-data="orgTreeData" :checked-model="orgCheckModel" :options="menuTreeOptions" :data-config="orgDataConfig">
        </Tree>
      </template>
    </DialogForm>
  </div>
</template>

<script setup >

import Tree from "@/components/plugs/tree/Tree.vue";
import Table from "@/components/plugs/table/Table.vue";
import DialogForm from "@/components/plugs/form/DialogForm.vue";
import {inject, nextTick, reactive, ref, toRaw} from "vue";
import {FormItemType} from "@/components/plugs/form/DialogFormInterface.js";
import {CheckedModel} from "@/components/plugs/tree/TreeView.js";
import {AXIOS_NAME} from "@/constant/constant.js";
import {ElMessage} from "element-plus";
import {deleteRow, HandleEnum} from "@/utils/utils.ts";

const selectTree = ref(null);
const pSelectTree = ref(null);
let orgTreeData = reactive([]);
const $axios = inject(AXIOS_NAME);
const tableRef = ref(null);
const userUlr = ref("/user/getUserPage");
const userSearchRef = ref(null);
const menuTreeData = reactive([]);
const checkedModel = ref(CheckedModel.CASCADE)
const orgCheckModel = ref(CheckedModel.MULTIPLE_NO_CASCADE);
const userEditFormRef = ref(null);
const searchFormData = reactive({
  "userName": ""
})
const menuTreeOptions = {
  "label": 'name'
}

const dataConfig = {
  simple: true,
  pFiled:'pid',
  idField: 'id',
  rootId: '0'
};
const orgDataConfig = {
  simple: true,
  pFiled:'pId',
  idField: 'id',
  rootId: '0'
};
const columns = [
  {field:"userName","desc": "名称"},
  {field:"hasOpen","desc": "状态",dicType:'start_using'},
  {field:"hasAdmin","desc": "是否是管理员",dicType:'has_admin'},
  {field:"string3","desc": "角色"},
  {field:"string1","desc": "机构"},
  {field:"showTime","desc": "创建时间",width: 200},
  {field:"handle","desc": "操作",isSlot:true,width:200}
];
let items = [];
items.push({type: FormItemType.INPUT_HIDDEN,label: 'id',name: 'id'});
items.push({type: FormItemType.INPUT_TEXT,label: '名称',name: 'userName',defaultValue:''});
items.push({type: FormItemType.INPUT_PASSWORD,label: '密码',name: 'password',defaultValue:''});
items.push({type: FormItemType.CUSTOMIZE_SELECT,label: '状态',name: 'hasOpen',
  url: '/dictionary/getDicDataByGroupId?groupId=start_using',textFiled:'text',valueField: "val",defaultValue:'1'});
items.push({type: FormItemType.CUSTOMIZE_SELECT,label: '管理员',name: 'hasAdmin',
  url: '/dictionary/getDicDataByGroupId?groupId=has_admin',textFiled:'text',valueField: "val",defaultValue:'0'});
items.push({type: FormItemType.CUSTOMIZE_SELECT,label: '角色',name: 'string3',
  url: '/role/getSystemRoleList',textFiled:'name',valueField: "id",isMultiple:true});
items.push({type: FormItemType.SLOT,label: '权限',name:'permissionTree'});
items.push({type: FormItemType.SLOT,label: '机构',name:'orgTree'});

let userForm = reactive({
  splitCol: 1,
  gutter: 20,
  labelWidth: 115,
  items:items,
  rules:{
    name: [
      { required: true, message: '请填写名称', trigger: 'blur' }
    ]
  },
});

const getMenuTreeData = () =>{
  menuTreeData.clear();
  orgTreeData.clear();
  $axios.post('/menu/getAllPermissionTree').then((response) => {
    const data = response.data;
    if(data.code = 1){
      let permissionData = data.data;
      menuTreeData.pushAll(permissionData);
    }
  },(error) => {
  });

  $axios.post('/org/getAllOrg').then((response) => {
    const data = response.data;
    if(data.code = 1){
      let orgData = data.data;
      orgTreeData.pushAll(orgData);
    }
  },(error) => {
  });
}
getMenuTreeData();

const searchDicClick = () =>{
  tableRef.value.reload(toRaw(searchFormData));
}

const resetSearchClick = () =>{
  searchFormData.userName = '';
}

const addDicClick = () =>{
  getMenuTreeData();
  userEditFormRef.value.show();
}

const validateSuccess = (data) =>{
  const pData = selectTree.value.getCheckedKeys();
  const oData = pSelectTree.value.getCheckedKeys();

  data.string1 = pData.join(',');
  data.string2 = oData.join(',');
  data.string3 = data.string3 == undefined ? '' : data.string3.join(',');

  $axios.post('/user/addOrUpdate',data).then(response => {
      const data = response.data;
      ElMessage.info(data.msg);
      if(data.code == 1){
        tableRef.value.reload();
        userEditFormRef.value.close();
      }
  },error =>{

  });
}

const editTableData = (rowData,rowIndex) =>{
  rowData.string3 = rowData.string4 == undefined ? '' :   rowData.string4.split(',');
  const orgTreeCheckedData = rowData.string2 == undefined ? [] : rowData.string2.split(',');
  const pTreeCheckedData = rowData.string5 == undefined ? [] : rowData.string5.split(',');
  userEditFormRef.value.show(function (){
    userEditFormRef.value.setData(rowData);
    selectTree.value.setCheckedKeys(pTreeCheckedData);
    pSelectTree.value.setCheckedKeys(orgTreeCheckedData);
  })
}

const deleteTableRowData = (rowData,rowIndex) =>{
  deleteRow('/user/deleteUser',rowData,function (state,data){
    if(state == HandleEnum.SUCCESS){
      tableRef.value.reload();
    }
  });
}
</script>

<style scoped>

</style>